<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>英语自由学</title>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/axios-0.18.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div>考试时间为:2020年05月23日</div>
<div id="nowDate">
	当前时间为:{{dateFormat(date)}} <br />
	距离考试时间还有:{{distanceTime}}<br />
	今天应该看到的页数为:{{nowPage}}
</div>
<br />

<div id="app">
	姓名：<input type="text" v-model="en.name" placeholder="请输入姓名"/><br />
	页数：<input type="text" v-model="en.page" placeholder="请输入今天看到的页数"/><br />
	<input type="button" value="提交" @click="submit(en)" />

	<p v-if="boolearn">
		姓名：{{da.name}}<br>
		页数：{{da.page}}
	</p>
</div>


</body>

<!-- 实时显示当前的时间 -->
<script>
    var v = new Vue({
        el: "#nowDate",
        data: {
            date: new Date(),
            distanceTime: "0",
            nowPage: "0"

        },
        mounted() {
            var _this = this; //声明一个变量指向vue实例this,保证作用域一致
            this.timer = setInterval(function() {
                _this.date = new Date(); //修改数据date
            }, 1000);
        },
        beforeDestroy() {
            if (this.timer) {
                clearInterval(this.timer); //在vue实例销毁钱，清除我们的定时器
            }
        },
        methods: {
            //时间格式化函数，此处仅针对yyyy-MM-dd hh:mm:ss 的格式进行格式化
            dateFormat(time) {
                var date = new Date(time);
                var year = date.getFullYear();
                /* 在日期格式中，月份是从0开始的，因此要加0
                 * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
                 * */
                var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
                var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
                var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
                var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();


                // 3、4、5月份的总时间
                allTime = 23 + 30 + 31;
                // 距离结束还有几天计算
                if (month == 02) {
                    v.distanceTime = "3月1日开始学习";
                }
                if (month == 03) {
                    v.distanceTime = allTime - day;
                }
                if (month == 04) {
                    v.distanceTime = allTime - 31 - day;
                }
                if (month == 05) {
                    v.distanceTime = allTime - 31 - 30 - day;
                }
                // 今天，应该看到的页数计算
                // 多看的页数（5的整数倍）
                morePage = 5;
                if (month == 02) {
                    v.nowPage = "3月1日开始学习";
                }
                if (month == 03) {
                    v.nowPage = day * 5 + morePage;
                }
                if (month == 04) {
                    v.nowPage = (31 + day) * 5 + morePage;
                }
                if (month == 05) {
                    v.nowPage = (30 + 31 + day) * 5 + morePage;
                }
                // 拼接
                return year + "年" + month + "月" + day + "日 " + hours + ":" + minutes + ":" + seconds;
            }
        }
    })
</script>
<!-- 发送数据到后端 -->
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            en: {
                name: null,
                page: null
            },
            boolearn: false,
            da: {
                "name": "null",
                "page": "null"
            },
            result: {
                "status": "null",
                "errmsg": "null",
                "data": "null"
            }

        },
        methods: {
            submit: function(en) {
                // 关闭返回结果在页面显示
                vm.boolearn = true;

                // 发送post请求
                axios.post("/learn/addPlan", en)

                // 正常返回情况处理(200)
                    .then(function(response) {
                        // 对返回值进行显示

                        vm.result = response.data;
                        console.log(vm.result.status);
                        console.log("正常返回");
                        // alert(vm.result.status);
                        console.log(vm.result.errmsg);
                        alert(vm.result.errmsg);
                        // 将返回值显示到页面上
                        vm.da = vm.result.data;
                        vm.boolearn = true;
                    })

                    // 异常返回值处理 (102、103、105)
                    .catch(function(error) {
                        vm.result = response.data;
                        // console.log(vm.result.status);
                        alert(vm.result.status);
                        console.log(vm.result.errmsg);
                        console.log("返回异常");
                        alert(vm.result.errmsg);
                    });

            }
        }

    })
</script>
</html>
